<template>
    <div class="sales-perfo-main">
      <title-bar :bar-title="barTitle"></title-bar>

      <div class="sales-perfo-body">
        <data-grid :grid-list="performanceobjectivesGridList"></data-grid>
      </div>
    </div>
</template>


<script>

import { XCircle} from 'vux'
import DataGrid from './data-grid'
import TitleBar from './title-bar';

export default{
  props:{
    businessVolume:{
      default:0,
      require: true
    },
    totalOrderQuantity:{
      default:0
    },
    perCustomerTransaction:{
      default:0
    }
  },

  data () {

    console.log('this.businessVolume', this.businessVolume)

    return {
      barTitle : "业绩目标 (本月)",
      percent: null,
      percentVal: '',
      strokeColor2: '#EA578E',
      finishedTarget:6020,
      performanceobjectivesGridList:[]
    }

  },

  methods: {

    isSetTarget: function () {
       return typeof this.target === 'number';
    },

    setDataList () {

        let imgServer = this.$store.state.app.imgServer;

        this.performanceobjectivesGridList= [
        {
          icon: imgServer+'volumeofbusiness.png',
          ttext: '成交总金额',
          btext: this.businessVolume,
          link: '',
        },

        {
          icon: imgServer+'totalorderquantity.png',
          ttext: '成交总单数',
          btext: this.totalOrderQuantity,
          link: '',
        },

        {
          icon: imgServer+'percustomertransaction.png',
          ttext: '客单价',
          btext: this.perCustomerTransaction,
          link: '¥3000.00',
        }
        ];
    }

  },

  mounted () {

    if(this.isSetTarget()) {
       this.percent = (this.finishedTarget/this.target*100).toFixed(1);
    }

    if(this.percent> 0) {
      this.percentVal = this.percent+'%';
    } else {
      this.percentVal = '--</br>%';
    }

    this.setDataList();
  },

  watch:{

    businessVolume () {
      this.setDataList()
    }

  },
  components: {
     XCircle,
     TitleBar,
     DataGrid
  }
}

</script>


<style lang="less">

  @import "../less/base";

  .sales-perfo-body {

    &:extend(.clearfix all);

    padding: 20px 0 0 15px;
    border-bottom: 1px solid #EDEDED;

    @itemSize : 75px;

    .circle-wrapper {

      float: left;
      width:@itemSize;
      height:@itemSize;
      line-height: 12px;
    }


    .target-been-set {

      height: @itemSize;
      display: table;

      .content{
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
        font-size: 12px;
        color:#333;


        label{
          display: inline-block;
          width: 50px;
        }

        .finished-target {
          span {
          color:#EA578E;
          }
        }
      }
    }

    .sales-target-body {

      float: left;
      display: inline-block;
      vertical-align: middle;

      .set-target{
        font-size: 14px;
        font-weight: normal;
        color:#23B2E2;
        height:@itemSize;
        line-height: @itemSize;

        .set-target-trig{
        display:inline-block;
        margin-left: 20px;
        }
      }
    }
  }

</style>
